<template>
	<hsProjectTemplate currentPageType="bunkLibrary" ref="projectPage" :queryInterface="chargeProjectListApi" :setTableCloumns="setCloumn" projectValueAttr="projectCode" :setDefaultQuery="setDefaultQuery">
		<template #operation>
			<el-table-column label="电费" width="120" align="center">
				<template #default="{ row }">
					<el-button class="zs-link" link size="small" @click="openDrawer(true, 'info', row, 'charge', 'electricity')" v-btnPermi="{ permis: ['p_btn_property_project_watermeter_allocation_list_electric_view'] }">查看</el-button>
					<el-divider direction="vertical" />
					<el-button class="zs-link" link size="small" @click="openDrawer(false, 'edit', row, 'charge', 'electricity')" v-btnPermi="{ permis: ['p_btn_property_project_watermeter_allocation_list_electric_edit'] }">编辑</el-button>
				</template>
			</el-table-column>
			<el-table-column label="水费" width="120" align="center">
				<template #default="{ row }">
					<el-button class="zs-link" link size="small" @click="openDrawer(true, 'info', row, 'charge', 'water')" v-btnPermi="{ permis: ['p_btn_property_project_watermeter_allocation_list_view'] }">查看</el-button>
					<el-divider direction="vertical" />
					<el-button class="zs-link" link size="small" @click="openDrawer(false, 'edit', row, 'charge', 'water')" v-btnPermi="{ permis: ['p_btn_property_project_watermeter_allocation_list_edit'] }">编辑</el-button>
				</template>
			</el-table-column>
		</template>
	</hsProjectTemplate>

	<DrawerCharge :isShow="drawer.charge.isShowDrawer" :isReadOnly="drawer.charge.isReadOnly" :handleType="drawer.charge.handleType" :energyType="drawer.charge.energyType" :currentRow="currentRow.data" @close="closeDrawer($event, 'charge')"> </DrawerCharge>
</template>

<script setup>
	import { chargeProjectListApi } from '@/api/energy.js';
	import { reactive, ref } from 'vue';
	import DrawerCharge from './components/drawerCharge.vue';

	let projectPage = ref()
	// 抽屉相关
	let currentRow = reactive({ data: {} });
	let drawer = reactive({
		charge: {
			handleType: '',
			energyType: '',
			isReadOnly: false,
			isShowDrawer: false,
		},
	});

	const openDrawer = (flag, handleType, row, drawerType, energyType) => {
		drawer[drawerType].isReadOnly = flag;
		drawer[drawerType].isShowDrawer = true;
		drawer[drawerType].handleType = handleType;
		drawer[drawerType].energyType = energyType;
		currentRow.data = row;
	};

	const closeDrawer = (data, drawerType) => {
		drawer[drawerType].isShowDrawer = data.isShow;
		data.isRefresh && projectPage.value.queryList();
	};

	function setDefaultQuery() {}

	function setCloumn(cloumn) {
		// cloumn[0].width = 'auto';
		return cloumn.concat([
			{ prop: 'rentalAreaSum', label: '租赁面积', align: 'right' },
			{ prop: 'waterMeterAllocation', label: '水费', align: 'right' },
			{ prop: 'electricMetereAllocation', label: '电费', align: 'right' },
		]);
	}

</script>
